<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=q54xW5I3uHC9g1MuXPV4r7yUANvybZYm"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=q54xW5I3uHC9g1MuXPV4r7yUANvybZYm"></script>
    <style>
        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }
        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }

        #allmap{
            height: 450px;
            width: 100%;
            overflow: hidden;
            font-family: "微软雅黑";
            border:1px solid green;
        }

        /*百度地图搜索框定位*/
        .tangram-suggestion-main {
            z-index: 999999;
        }
        /*设置弹出框样式*/
        .el-dialog__body {
            padding: 0px 20px;
            color: #606266;
            font-size: 14px;
        }
        /**/
        /*.el-input--suffix .el-input__inner {
            width: 450px;
        }*/
    </style>
</head>

<legend style="font-size: 16px; margin-left: 20px;">选择站点经纬度坐标</legend>

            <div style="margin-left: 100px; margin-right: 100px; text-align: center; margin-bottom: 20px;">

                要查询的地址：<input id="text_" type="text" value="青岛" style="margin-right: 100px;" />

                查询结果(经纬度)：<input id="result_" type="text" />

                <input type="button" value="查询" onclick="searchByStationName();" />

            </div>

            <div style="margin: auto; width: 1000px; height: 600px; border: 2px solid gray; margin-bottom: 50px;" id="container"></div>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>首页<small>公司分布图</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

<script type="text/javascript">

    var longitude = 120.391523;

    var latitude = 36.067794;

    var map = new BMap.Map("container");

    map.setDefaultCursor("crosshair");

    map.enableScrollWheelZoom();

    var point = new BMap.Point(longitude, latitude);

    map.centerAndZoom(point, 13);

    var gc = new BMap.Geocoder();

    map.addControl(new BMap.NavigationControl());

    map.addControl(new BMap.OverviewMapControl());

    //map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

    map.addControl(new BMap.ScaleControl());

    map.addControl(new BMap.MapTypeControl());

    map.addControl(new BMap.CopyrightControl());



    var marker = new BMap.Marker(point);

    map.addOverlay(marker);



    marker.addEventListener("click",

    function (e) {
        document.getElementById("lonlat").value = e.point.lng;

        document.getElementById("lonlat2").value = e.point.lat;

    });

    marker.enableDragging();

    marker.addEventListener("dragend",

    function (e) {
        gc.getLocation(e.point,

        function (rs) {
            showLocationInfo(e.point, rs);

        });

    });

    function showLocationInfo(pt, rs) {
        var opts = {
            width: 250,

            height: 150,

            title: "当前位置"

        };

        var addComp = rs.addressComponents;

        var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";

        addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;



        $("#jingdu").val(pt.lng);

        $("#weidu").val(pt.lat);

        $("#xiangxidiqu").val(addComp.province + addComp.city + addComp.district);



        var infoWindow = new BMap.InfoWindow(addr, opts);

        marker.openInfoWindow(infoWindow);

    }

    map.addEventListener("click",

    function (e) {
        document.getElementById("lonlat").value = e.point.lng;

        document.getElementById("lonlat2").value = e.point.lat;

    });

    var traffic = new BMap.TrafficLayer();

    map.addTileLayer(traffic);

    function iploac(result) {
        var cityName = result.name;

    }

    var myCity = new BMap.LocalCity();

    myCity.get(iploac);

    function sear(result) {
        var local = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map

            }

        });

        local.search(result);

    }



    var localSearch = new BMap.LocalSearch(map);

    localSearch.enableAutoViewport(); //允许自动调节窗体大小



    function searchByStationName() {
        map.clearOverlays();//清空原来的标注

        var keyword = document.getElementById("text_").value;

        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);

            document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;

            map.centerAndZoom(poi.point, 13);

            var marker11 = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度

            map.addOverlay(marker11);



            marker11.addEventListener("click",

             function (e) {
                document.getElementById("lonlat").value = e.point.lng;

                document.getElementById("lonlat2").value = e.point.lat;

            });

            marker11.enableDragging();

            marker11.addEventListener("dragend",

            function (e) {
                gc.getLocation(e.point,

                function (rs) {
                    showLocationInfo(e.point, rs);

                });

            });

            function showLocationInfo(pt, rs) {
                var opts = {
                    width: 250,

                    height: 150,

                    title: "当前位置"

                };

                   var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;

                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");

                marker11.addEventListener("click", function () { this.openInfoWindow(infoWindow); });

                marker11.enableDragging();

                $("#jingdu").val(poi.point.lng);

                $("#weidu").val(poi.point.lat);

                $("#xiangxidiqu").val($("#text_").val());

              }



                         });

            localSearch.search(keyword);

        }

		loadMapAutocomplete("text_");
		function loadMapAutocomplete(mySuggestId) {
        Ac = new BMap.Autocomplete( //建立一个自动完成的对象
            {
                "input": text_,
            });
    }

</script>